<template>
  <div class="order_div">
    <!-- 头部组件 -->
    <my-header title="订单">
      <template #right_icon>
        <span class="iconfont icon-youjian gengduo">
          <span class="red_icon"></span>
        </span>
      </template>
    </my-header>
    <!-- 用户订单信息展示部分 -->
    <van-tabs v-if="isRander" v-model="active" animated color="#E74E4B" line-width="0.2rem" :swipeable="true">
      <van-tab title="全部">
        <!-- 皮肤展示部分 -->
        <template v-if="orderData && orderData.gameid">
          <skin-info
            class="skin_info"
            v-for="(item,index) of orderData.gameid"
            :key="item.gameid"
            :game_data_index="index" 
            :game_data="orderData">
          <template #other>
            <!-- 底部显示订单状态及快捷按钮 -->
            <van-row class="order_bott">
              <!-- 分两列 -->
              <!-- 第一列展示显示订单状态 -->
              <van-col span="4" class="orderStatus">{{getOrderStatu(item.orderStatus[index])}}</van-col>
              <!-- 第二列 按钮部分 -->
              <van-col span="20" class="button_arrea">
                <a href="javascript:" class="color_red" v-if="item.orderStatus[index] == 2" @click="pay(item.gameid,item.game_oper)">立即支付</a>
                <a href="javascript:"  v-if="item.orderStatus[index] == 2" @click="updateOrder(item.gameid,item.orderTimer[index],'quxaio')">取消订单</a>
                <a href="javascript:" v-if="item.orderStatus[index] == 1 || item.orderStatus[index] == 3" @click="updateOrder(item.gameid,item.orderTimer[index],'delete')">删除订单</a>
              </van-col>
            </van-row>
          </template>
          </skin-info>
        </template>
        <template v-if="orderData.gameid.length == 0">
          <center>
            <span class="font_size_16">暂无订单</span>
          </center>
        </template>
      </van-tab>
      <van-tab title="待付款">
        <template v-if="order_waitPay && order_waitPay.gameid">
          <skin-info
            class="skin_info"
            v-for="(item,index) of order_waitPay.gameid"
            :key="item.gameid"
            :game_data_index="index" 
            :game_data="order_waitPay">
          <template #other>
            <!-- 底部显示订单状态及快捷按钮 -->
            <van-row class="order_bott">
              <!-- 分两列 -->
              <!-- 第一列展示显示订单状态 -->
              <van-col span="4" class="orderStatus">{{getOrderStatu(item.orderStatus[index])}}</van-col>
              <!-- 第二列 按钮部分 -->
              <van-col span="20" class="button_arrea">
                <a href="javascript:" class="color_red" v-if="item.orderStatus[index] == 2" @click="pay(item.gameid,item.game_oper)">立即支付</a>
                <a href="javascript:"  v-if="item.orderStatus[index] == 2" @click="updateOrder(item.gameid,item.orderTimer[index],'quxaio')">取消订单</a>
                <a href="javascript:" v-if="item.orderStatus[index] == 1 || item.orderStatus[index] == 3" @click="updateOrder(item.gameid,item.orderTimer[index],'delete')">删除订单</a>
              </van-col>
            </van-row>
          </template>
          </skin-info>
        </template>
        <template v-if="order_waitPay.gameid.length == 0">
          <center>
            <span class="font_size_16">暂无订单</span>
          </center>
        </template>
      </van-tab>
      <van-tab title="已取消">
        <template v-if="order_quxiao && order_quxiao.gameid">
          <skin-info
            class="skin_info"
            v-for="(item,index) of order_quxiao.gameid"
            :key="item.gameid"
            :game_data_index="index" 
            :game_data="order_quxiao">
          <template #other>
            <!-- 底部显示订单状态及快捷按钮 -->
            <van-row class="order_bott">
              <!-- 分两列 -->
              <!-- 第一列展示显示订单状态 -->
              <van-col span="4" class="orderStatus">{{getOrderStatu(item.orderStatus[index])}}</van-col>
              <!-- 第二列 按钮部分 -->
              <van-col span="20" class="button_arrea">
                <a href="javascript:" class="color_red" v-if="item.orderStatus[index] == 2" @click="pay(item.gameid,item.game_oper)">立即支付</a>
                <a href="javascript:"  v-if="item.orderStatus[index] == 2" @click="updateOrder(item.gameid,item.orderTimer[index],'quxaio')">取消订单</a>
                <a href="javascript:" v-if="item.orderStatus[index] == 1 || item.orderStatus[index] == 3" @click="updateOrder(item.gameid,item.orderTimer[index],'delete')">删除订单</a>
              </van-col>
            </van-row>
          </template>
          </skin-info>
        </template>
        <template v-if="order_quxiao.gameid.length == 0">
          <center>
            <span class="font_size_16">暂无订单</span>
          </center>
        </template>
      </van-tab>
    </van-tabs>
    <!-- 加载动画部分 -->
    <div v-if="!isRander">
      <van-loading size="0.24rem" vertical>加载中...</van-loading>
    </div>
    <!-- 底部组件 -->
    <my-footer></my-footer>
  </div>
</template>
<script>
import MyHeader from "../common/Header";// 头部组件
import SkinInfo from "../Home/components/ShowInFo";// 导入展示皮肤组件
import MyFooter from "../common/Footer";// 底部组件
export default {
  name:"Order",
  components: {
    MyFooter,
    MyHeader,
    SkinInfo
  },
  created() {
    this.getOrdersData();
  },
  data() {
    return {
      orderData:{},// 用户所有订单信息
      order_waitPay:{// 待支付订单信息
        gameid:[],
        jin_count:[],
        role_count:[],
        skinList:[],
        zi_count:[]
      },
      order_quxiao:{// 已取消订信息
        gameid:[],
        jin_count:[],
        role_count:[],
        skinList:[],
        zi_count:[]
      },
      active:"",// 当前选中的菜单
      isRander:false,// 是否可以渲染列表部分
      data_get:false,// 强制重新获取数据
    }
  },
  methods: {
    // 获取订单数据
    async getOrdersData(){
      if(this.data_get == false){ // 如果不是需要强制 重新获取数据  
        if(this.orderData.gameid){// 如果是false 代表没有数据 
          return;
        }
      }
      this.data_get = false;
      console.log("请求订单数据");
      this.isRander = false;
      const {data:res} = await this.$http.get("getOrder");
      // if(res.status == 403){// 登录过期
      //   // this.$router.push("/login");
      //   return;
      // }
      this.isRander = true;
      this.orderData = res.data;
      console.log(res.data);

      // 分出 待支付 和 已取消订单
      if(res.data.gameid.length == 0){// 没有任何订单数据
        this.order_waitPay = {// 待支付订单信息
          gameid:[],
          jin_count:[],
          role_count:[],
          skinList:[],
          zi_count:[]
        };
        this.order_quxiao ={
          gameid:[],
          jin_count:[],
          role_count:[],
          skinList:[],
          zi_count:[]
        }
        return;
      }
      let user_order_status = res.data.gameid[0].orderStatus;// 所有订单状态
      for (let index = 0; index < user_order_status.length; index++) {
        if(user_order_status[index] == 2){//2表待支付
          this.order_waitPay.gameid.push(res.data.gameid[index]);
          this.order_waitPay.jin_count.push(res.data.jin_count[index]);
          this.order_waitPay.role_count.push(res.data.role_count[index]);
          this.order_waitPay.skinList.push(res.data.skinList[index]);
          this.order_waitPay.zi_count.push(res.data.zi_count[index]);
        }else if(user_order_status[index] == 3){ //3已取消
          // this.order_quxiao
          this.order_quxiao.gameid.push(res.data.gameid[index]);
          this.order_quxiao.jin_count.push(res.data.jin_count[index]);
          this.order_quxiao.role_count.push(res.data.role_count[index]);
          this.order_quxiao.skinList.push(res.data.skinList[index]);
          this.order_waitPay.zi_count.push(res.data.zi_count[index]);
        }
      }

    },
    // 修改订单状态
    async updateOrder(gid,otimer,type){
      const {data:res} = await this.$http.post("deleteOrderByGameId",{gid:gid,otimer:otimer,type:type});
      this.$message({position:"center",message:res.message});
      if(!res.isok) return;
      // 重新获取数据
      // console.log("lalalal");
      this.data_get = true;
      this.getOrdersData();
    },
    // 支付订单
    pay(gid,oper){
      this.$router.push({
        path:"conorder",
        query:{
          gameid:gid,
          OperSys:oper
        }
      })
    }
  },
  computed:{
    // 获取订单状态
    getOrderStatu(){
      return function(orderStatuNumber){
        switch (orderStatuNumber) {
          case 1:
            return "已完成"
            break;
          case 2:
            return "待支付"
            break;
          default:
            return "已取消"
            break;
        }
      }
    }
  },
  watch: {
    // 监视路由
    "$route":function(val){
      if(val.path != "/orders"){// 访问的不是订单页面
        return;
      }
      this.getOrdersData();
    }
  },
}
</script>
<style lang="less" scoped>
  .gengduo{
    position: relative;
    font-size: 0.2rem;
  }
  .skin_info{
    margin-top: 0.06rem;
  }
  .van-tabs{
    /deep/.van-tabs__wrap{
      position: fixed;
      top: 0.45rem;
      width: 100%;
      z-index: 1;
    }
  }
  .order_div{
    padding-top: 0.89rem;
    padding-bottom: 0.48rem;
    min-height: 100%;
    box-sizing: border-box;
  }
  .order_bott{
    font-size: 0.12rem;
    padding: 0.06rem 0.1rem;
    box-sizing: border-box;
    background-color: #FFF;
  }
  .orderStatus{
    color: #E74E4B;
    font-size: 0.14rem;
    line-height: 0.38rem;
  }
  .button_arrea{
    a{
      display: inline-block;
      float: right;
      width: 0.62rem;
      height: 0.28rem;
      padding: 0rem 0.1rem;
      border: 0.01rem solid #CCCCCC;
      margin: 0.04rem 0rem 0.04rem 0.05rem;
      border-radius: 0.2rem;
      text-align: center;
      line-height: 0.28rem;
      font-size: 0.14rem;
      color: #1e1e1e;
    }

  }

</style>